<template>
  <view class="exam-start-container">
    <view class="bg" :style="{top: topBar.style ==='custom'?'0':-topBar.height+'px'}">
      <!--      <view class="text_container">-->
      <!--        <view>连续2次模拟考试</view>-->
      <!--        <view class="yellow">90分以上再去考试！</view>-->
      <!--      </view>-->
    </view>
    <navbar :title="title" mode="transparent">
      <template v-slot:content>
        <view class="flex-row justify-center top-bar">
          <image src="@/static/white_back.png" mode="widthFix" class="back" @click="toBack"></image>
          <text class="self-center title">{{ title }}</text>
        </view>
      </template>
    </navbar>
    <view class="mask" @click="goJingxuan"/>
    <view class="flex-col exam-content-container">
      <view class="flex-col inner-container">
        <view class="row flex-row">
          <view class="label">考试类型：</view>
          <view class="content" v-if="mine.carType === 1">小车C1/C2/C3</view>
          <view class="content" v-else-if="mine.carType === 2">货车A2/B2</view>
          <view class="content" v-else-if="mine.carType === 3">客车A1/B1/A3</view>
        </view>
        <view class="row flex-row">
          <view class="label">考试时间：</view>
          <view class="content">45分钟</view>
        </view>
        <view class="row flex-row">
          <view class="label">合格标准：</view>
          <view class="content">90分及格（满分100分）</view>
        </view>
        <view class="row flex-row">
          <view class="label">出题规则：</view>
          <view class="content">按公安部规定比例随机抽取</view>
        </view>
        <view class="row tips">记分规则：考试过程中不能修改答案，每错1题扣{{ fen }}分，错题累计超过{{
            error
          }}题，考试不通过
        </view>
        <view class="btn flex-row align-center justify-between" @click="toExam">
          <view class="flex-col left-container">
            <text class="title">模拟考试</text>
            <text class="sub-title">仿真模拟考试</text>
          </view>
          <view class="inner-btn center">
            <view class="img"/>
            <text class="title">开始考试</text>
          </view>
        </view>
        <view class="btn zhenshi flex-row align-center justify-between" @click="gokaochang">
          <view class="flex-col left-container">
            <text class="title">真实考场</text>
            <text class="sub-title">高度还原正式考场</text>
          </view>
          <view class="inner-btn center">
            <view class="img"/>
            <text class="title">开始考试</text>
          </view>
        </view>
      </view>
      <image @click="goMijuan" src="https://down.qwdata.vip/app_icon/1702746527791" mode="widthFix"
             class="moni"/>
    </view>
    <ADIntercept ref="ADIntercept"></ADIntercept>
    <GatewayDialog ref="GatewayDialog" page="exam"></GatewayDialog>
    <TiyanDialog :bottom="true"></TiyanDialog>
  </view>
</template>

<script>
import {mapGetters} from 'vuex';
import navbar from '@/components/navbar';
import ADIntercept from "@/components/ADIntercept.vue";
import GatewayDialog from "@/components/GatewayDialog.vue";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {
    TiyanDialog,
    GatewayDialog,
    ADIntercept,
    navbar,
  },
  data() {
    return {
      title: '模拟考试',
      fen: 1,
      error: 10,
      kemu: ''
    };
  },
  computed: {
    ...mapGetters(['mine', 'query', 'settings', 'topBar'])
  },
  onLoad({kemu = '1'}) {
    this.kemu = kemu
    if (kemu === '1') {
      this.title = '科一' + this.title
    } else if (kemu === '4') {
      this.title = '科四' + this.title
      this.fen = 2
      this.error = 5
    }
  },
  onReady() {

  },
  methods: {
    toBack() {
      uni.navigateBack();
    },
    goJingxuan() {
      uni.navigateTo({
        url: '/pages/detail/detail?type=jingxuan&title=精选题库&kemu=' + this.kemu,
      });
    },
    async toExam() {
      try {
        await this.$refs.GatewayDialog.tryOpen()
        await this.$refs.ADIntercept.tryOpen()
        uni.redirectTo({
          url: '/pages/detail/detail?type=moni&title=' + this.title + '&kemu=' + this.kemu
        });
      } catch (e) {
        console.log(e)
      }
    },
    goMijuan() {
      uni.navigateTo({
        url: '/pages/mijuan/mijuan?kemu=1'
      })
    },
    gokaochang() {
      uni.navigateTo({
        url: '/pages/kaochang_moni_enter/kaochang_moni_enter?kemu=' + this.kemu
      })
    }
  }
};
</script>

<style lang="scss">
.exam-start-container {
  .bg {
    position: fixed;
    top: 0;
    width: 100%;
    background-image: url("@/static/exam/bg2.png");
    height: 824rpx;
    background-size: cover;
    background-position: top;
    left: 0;

    .text_container {
      position: absolute;
      left: 46rpx;
      top: 224rpx;
      font-size: 40rpx;
      font-weight: bold;
      color: #fff;

      .yellow {
        margin-top: 16rpx;
        color: rgba(247, 255, 154, 1);
      }
    }
  }

  .top-bar {
    width: 100vw;

    .back {
      position: absolute;
      left: 30upx;
      width: 36upx;
      height: 36upx;
      align-self: center;
    }

    .title {
      font-weight: bold;
      font-size: 32upx;
      color: #FFFFFF;
    }
  }

  .mask {
    position: absolute;
    top: 350upx;
    width: 100vw;
    height: 80upx;
    z-index: 1;
  }

  .exam-content-container {
    position: absolute;
    width: 100vw;
    margin-top: 300upx;

    .btn {
      height: 140upx;
      border-radius: 70upx;
      background-image: linear-gradient(90deg, #538DFF 0%, #3073F6 100%);
      color: #fff;
      margin: 30rpx;

      &:last-child {
        margin-top: 0;
      }

      &.zhenshi {
        background-image: linear-gradient(to right, rgb(42, 42, 42), rgb(25, 26, 31));

        .left-container {
          .title {
            color: rgb(246, 203, 177);
          }

          .sub-title {
            color: rgba(246, 203, 177, 0.85);
          }
        }

        .inner-btn {
          .img {
            background-image: linear-gradient(to right, rgb(246, 203, 177), rgb(247, 228, 210));
            border-radius: 100rpx;
          }

          .title {
            color: rgb(42, 42, 42);
          }
        }
      }

      .left-container {
        margin-left: 60rpx;

        .title {
          font-weight: bold;
          font-size: 18px;
          color: #FFFFFF;
        }

        .sub-title {
          margin-top: 5rpx;
          opacity: 0.85;
          font-size: 14px;
          color: #FFFFFF;
        }
      }

      .inner-btn {
        width: 184upx;
        height: 76upx;
        margin-right: 36upx;

        .img {
          position: absolute;
          width: 184upx;
          height: 76upx;
          background-image: linear-gradient(to right, rgb(252, 252, 252), rgb(207, 235, 248));
          border-radius: 100rpx;
        }

        .title {
          position: absolute;
          font-weight: bold;
          font-size: 32upx;
          color: #3073F6;
        }
      }
    }

    .inner-container {
      margin: 0 36upx 0 36upx;
      background: #fff;
      box-shadow: 4upx 4upx 12upx 0 rgba(0, 0, 0, 0.08);
      border-radius: 24upx;
      padding-top: 50rpx;

      .row {
        margin-left: 70upx;
        margin-right: 40upx;
        margin-bottom: 25upx;

        .label {
          font-weight: bold;
          font-size: 15px;
          color: #000000;
        }

        .content {
          font-size: 15px;
          color: #5E5E5E;
        }

        &.tips {
          color: #9e9e9e;
          font-size: 24upx;
          text-align: center;
          line-height: 40upx;
          margin-bottom: 30upx;
        }
      }
    }

    .moni {
      width: 678upx;
      margin: 36rpx;
      margin-top: 20rpx;
    }
  }
}
</style>
